<template>
  <div class="header-view">
    <div class="header-top" :style="{backgroundImage:`url(${bgImgTop})`}">
      <div
        class="flex align-center justify-center text-white"
        style="
        font-size: 18px;
        font-weight: 500;
        width: 390px;
        height: 32px;
      "
      >
        chaoyuan
      </div>
      <div
        class="flex justify-between align-center padding-lr"
      >
        <div class="flex align-center" style="padding-left: 3px">
          <div style="width: 15px; height: 18px">
            <img
              src="../../../../../assets/icons/app/1.png"
              draggable="false"
              width="100%"
              height="100%"
            >
          </div>
          <div
            class="padding-lr-xs text-white text-cut"
            style="font-size: 18px; font-weight: 500; max-width: 234px"
          >
            福州市人民政府
          </div>
          <div style="width: 9px; height: 5px;display: flex;">
            <img
              src="../../../../../assets/icons/app/2.png"
              draggable="false"
              width="100%"
              height="100%"
            >
          </div>
        </div>
        <div style="width: 18px; height: 18px; margin-right: 3px">
          <img
            src="../../../../../assets/icons/app/3.png"
            draggable="false"
            width="100%"
            height="100%"
          >
        </div>
      </div>
      <div
        v-show="showSearch"
        class="padding-lr"
        style="padding-bottom: 11px; padding-top: 12px"
      >
        <el-input v-model="a" prefix-icon="el-icon-search" :placeholder="searchPlaceholder" />
      </div>
    </div>
    <div v-show="showSwiper" class="header-bottom" :style="{padding:swiperShowStyle,backgroundImage:`url(${bgImgBottom})`}">
      <div class="swiper" :style="{backgroundSize:swiperImgStyle}" />
    </div>
    <div
      class="padding bg-white margin-bottom-sm"
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div v-for="(item,i) in hints" :key="item.text" class="flex align-center">
        <div style="width: 18px; height: 15px">
          <img :src="getIcon(item.icon,i)" draggable="false" height="100%">
        </div>
        <div class="margin-left-sm lem-text-gray" style="font-size: 12px">
          <span>{{ item.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HeaderView',
  props: {
    options: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      a: ''
    }
  },
  computed: {
    bgImgTop() {
      const { top } = this.options.bgImg
      if (!top) {
        return require('../../../../../assets/images/top.png')
      }
      return JSON.parse(top)[0].url
    },
    bgImgBottom() {
      const { bottom } = this.options.bgImg
      if (!bottom) {
        return require('../../../../../assets/images/bottom.png')
      }
      return JSON.parse(bottom)[0].url
    },
    showSearch() {
      return this.options.search.show
    },
    searchPlaceholder() {
      return this.options.search.placeholder
    },
    showSwiper() {
      return this.options.swiper.show
    },
    swiperShowStyle() {
      return this.options.swiper.showStyle
    },
    swiperImgStyle() {
      return this.options.swiper.imgStyle
    },
    hints() {
      return this.options.hints
    }
  },
  methods: {
    getIcon(icon, i) {
      if (!icon) {
        return require(`../../../../../assets/icons/app/${i + '' + i}.png`)
      }
      return JSON.parse(icon)[0].url
    }
  }
}
</script>
<style lang="scss" scoped>
.header-bottom,.header-top{
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.header-bottom{
  padding-top: 10px;
}
.swiper{
  height: 145px;
  border-radius: 6px;
  background-image: url('../../../../../assets/images/12.png');
}
</style>
